<template>
  <div class="card">
    <slot name="header" v-if="customHead"></slot>
    <div class="header" v-else>
      <span class="l-title">{{ title }}</span>
      <slot name="header-right"></slot>
    </div>
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomWindow',
  props: {
    title: {
      type: String,
      default: ''
    },
    customHead: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  computed: {
  },
  watch: {
  },
  created () {
    // do something
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
.card {
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background-image: url("../assets/img/title-bg.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding: 0 20px 0 50px;
    flex-shrink: 0;

    .l-title {
      font-size: 18px;
      letter-spacing: 2px;
      font-family: Alimama;
      background-image: -webkit-linear-gradient(bottom, #14a8ed, #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: ShiShangZhongHeiJianTi;
    }
  }

  .main {
    flex: 1;
    background-color: #092b4f;
  }
}
</style>
